html {
  box-sizing: border-box;
  //根元素字体大小；10 / 16 = 62.5%，采用rem单位时，1rem = 10px
  font-size: 62.5%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  font-family: sans-serif;
}

.header {
  text-align: center;
  background: linear-gradient(60deg, #543ab7, #00acc1 100%);
  color: #fff;
  .waves {
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 100px;
    margin-bottom: -7px;
    .parallax {
      use {
        animation: move_forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        &:nth-of-type(1) {
          animation-delay: -2s;
          animation-duration: 7s;
        }
        &:nth-of-type(2) {
          animation-delay: -3s;
          animation-duration: 10s;
        }
        &:nth-of-type(3) {
          animation-delay: -4s;
          animation-duration: 13s;
        }
        &:nth-of-type(4) {
          animation-delay: -5s;
          animation-duration: 20s;
        }
      }
    }
  }
}

@keyframes move_forever {
  from {
    transform: translateX(-90px);
  }
  to {
    transform: translateX(85px);
  }
}
